    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓动终结版之筋斗云</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: black;
            }
            #box{
                height: 42px;
                width: 800px;
                background: url(imgs/wifi.png) right center no-repeat  beige;
                border: 1px solid #000000;
                margin: 100px auto;
                border-radius: 10px;
                position: relative;
            }
            ul{

                display: inline-block;
                list-style: none;
                position: absolute; /* 这一段纯属是将筋斗云放在li下面（1）   */

            }
            ul li{

                float: left;
                height: 42px;
                width: 83px;
                text-align: center;
                line-height: 42px;
                cursor: pointer;
            }
            #span1{
                width: 83px;
                height: 42px;
                background: url(imgs/cloud.gif) no-repeat;
                position: absolute;
                left: 0;
                top: 0;
            }

        </style>
    </head>
    <body>
    <div id="box">
        <span id="span1"></span><!--/* 这一段纯属是将筋斗云放在li下面（2） 在ul有定位的情况下只需要将span位置放在前面即可  */-->
        <ul id="ul">
            <li>天生梅西</li>
            <li>螳臂当车</li>
            <li>自以为是</li>
            <li>兢兢业业</li>
            <li>我要做主</li>
            <li>滋生烦恼</li>
            <li>太浓的爱</li>
            <li>天空蔚蓝</li>
        </ul>

    </div>
        <!--
        需求：1.将鼠标光标放在li的条目上时候，筋斗云跟随
             2.点击条目时候，移开鼠标筋斗云定住
             3.在条目2，已经点击时候，那么移动鼠标到其他条目时候，再移开那么筋斗云有记忆功能，还会回到点击的那个条目哪里
             4.关键点是定义了一个全局变量 archor，获取属性值，并将属性值赋给onmouseout中的函数animate（）
             5.不点击不记忆，不会获取index值，那么archor为0，它还会回到原来初始位置left=0处
        -->
    <script>

        var span=document.getElementById('span1');
        var box=document.getElementById('box');
        var ul=document.getElementById('ul');
        var liArr=ul.children;
        var liWidth=liArr[1].offsetWidth;
        console.log(liArr);
        var archor=0;
        for(var i=0;i<liArr.length;i++){
            liArr[i].index=i;
            liArr[i].onmouseover=function () {
           animation(span,this.index*liWidth);
           console.log(this.index)
            };
            liArr[i].onmouseout=function () {
                animation(span,archor*liWidth);
                console.log(this.index)
            };
            liArr[i].onclick=function () {
              archor=this.index;
              animation(span,archor*liWidth);
            }
        }

        function animation(ele,target) {
            clearInterval(ele.timer);
            var speed=target>ele.offsetLeft?10:-10;
            ele.timer=setInterval(function () {
                ele.style.left=ele.offsetLeft+speed+'px';
                if(Math.abs(target-ele.offsetLeft)<=Math.abs(speed)){
                    ele.style.left=target+'px';
                    clearInterval(ele.timer);
                }
            },20)
        }
    </script>
    </body>
    </html>